<template>
  <div>
    <div class="f-upload-wrap">
      <div
        class="upload-item"
        v-for="(item, index) in imageList"
        :key="index"
        :style="{ backgroundImage: 'url(' + item + ')' }"
      >
        <div class="upload-item-op">
          <div
            class="upload-item-op-left"
            @click="moveLeft(index)"
            v-show="!disabled"
          >
            <i class="el-icon-arrow-left"></i>
          </div>
          <div
            class="upload-item-op-view"
            @click="preview(index)"
            v-show="!disabled"
          >
            <i class="el-icon-zoom-in"></i>
          </div>
          <div
            class="upload-item-op-view"
            @click="preview(index)"
            style="height: 100%;"
            v-show="disabled"
          >
            <i
              class="el-icon-zoom-in"
              style="transform: translate(-50%, -50%);"
            ></i>
          </div>
          <div
            class="upload-item-op-right"
            @click="moveRight(index)"
            v-show="!disabled"
          >
            <i class="el-icon-arrow-right"></i>
          </div>
          <div
            class="upload-item-op-del"
            @click="remove(index)"
            v-show="!disabled"
          >
            <i class="el-icon-delete"></i>
          </div>
        </div>
      </div>

      <!-- 默认上传 -->
      <el-upload
        :action="action"
        :data="data"
        :name="inputName"
        :show-file-list="false"
        :before-upload="handleBeforeUpload"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-progress="handleProgress"
        v-show="!isUploading && imageList.length < max"
        :accept="picType"
        :disabled="disabled"
        v-loading="uploadLoading"
      >
        <div class="upload-btn">
          <i class="el-icon-plus"></i>
        </div>
      </el-upload>

      <!-- 上传进度条 -->
      <el-progress
        type="circle"
        :percentage="progress"
        :width="120"
        style="margin-left: 10px;"
        v-show="isUploading"
      ></el-progress>
    </div>

    <!-- 预览dialog -->
    <el-dialog
      :visible.sync="isShowPreview"
      custom-class="f-upload-preview"
      append-to-body
    >
      <img v-if="!~previewImage.indexOf('mp4')" class="f-upload-img" :src="previewImage" alt=""/>
      <video v-else autoplay controls class="f-upload-video">
        <source :src="previewImage">
      </video>
    </el-dialog>
  </div>
</template>

<script src="./script.js"></script>

<style src="./style.less" lang="less"></style>
